<template>
	<view class="body">
		<xk-header :headerbg="true" :back="true" title="员工管理"></xk-header>
		<view class="list">
			<view class="list-item">
				<view><text class="required">*</text>姓名:</view>
				<input class="title1" v-model="formInfo.user_name" placeholder="请输入员工姓名" placeholder-style="color:#ccc"/>
			</view>
			<view class="list-item">
				<view>身份证号:</view>
				<input class="title1" type="idcard" v-model="formInfo.staff_id" placeholder="请输入身份证号" placeholder-style="color:#ccc"/>
			</view>
			<picker :range="sexOption" :value="sexIndex" range-key="text"
				@change="sexChange">
				<view class="list-item">
					<view>性别：{{sexOption[sexIndex].text}}</view>
					<image mode="aspectFill" class="jiantou" src="/static/jiantou.png"/>
				</view>
			</picker>
			<view class="list-item">
				<view><text class="required">*</text>职务:</view>
				<input class="title1" v-model="formInfo.user_position" placeholder="请输入员工职务" placeholder-style="color:#ccc"/>
			</view>
			<view class="list-item">
				<view><text class="required">*</text>联系电话:</view>
				<input class="title1" v-model="formInfo.user_phonenum" placeholder="请输入员工联系电话" placeholder-style="color:#ccc"/>
			</view>
			<view class="list-item">
				<view>电子邮箱:</view>
				<input class="title1" v-model="formInfo.user_email" placeholder="请输入员工电子邮箱" placeholder-style="color:#ccc"/>
			</view>
			<view class="list-item desc-item">
				<view>描述信息:</view>
				<view>
					<textarea v-model="formInfo.description" placeholder="在此输入描述信息" placeholder-style="color:#ccc"/>
				</view>
			</view>
			<view class="list-item upload-img-item">
				<view>员工照片:</view>
				<upload-image v-if="formInfo.user_picurl" :imageDatas="[formInfo.user_picurl]" :max="1" :isData="true" @onChange="uploadImageChange()"/>
				<upload-image v-else :max="1" :isData="true" @onChange="uploadImageChange()"/>
			</view>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn" @click="onSubmit">提交</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				sexOption:[{text: '男', value: 1}, {text: '女', value: 2}],
				sexIndex: 0,
				formInfo:{
					pi_customer_staff_id: '',
					user_name: '',
					user_sex: 1,
					user_position: '',
					description: '',
					user_phonenum: '',
					user_email: '',
					user_picurl: '',
					staff_id: '',
				},
				notNull: {
					user_name: '请输入员工姓名',
					// staff_id: '请输入身份证号码',
					user_position: '请输入员工职务信息',
					user_phonenum: '请输入员工联系方式',
					// user_email: '请输入员工邮箱信息',
				},
			};
		},
		onLoad(options){
			console.log('app.globalData.pageData', app.globalData.pageData)
			let info = app.globalData.pageData
			app.globalData.pageData = '';
			if(info.user_name){
				this.formInfo = {
					pi_customer_staff_id: info.pi_customer_staff_id,
					user_name:  info.user_name,
					staff_id: info.staff_id,
					user_sex: info.user_sex,
					user_position: info.user_position,
					description: info.description,
					user_phonenum: info.user_phonenum,
					user_email: info.user_email,
					user_picurl: info.user_picurl
				}
				this.sexIndex = this.formInfo.user_sex == 1 ? 0 : 1
			}
		},
		methods:{
			testIdCard(){
				if(!this.$util.isIdcard(this.formInfo.staff_id)){
					this.$util.toast('请输入正确的身份证号码！');
				}
			},
			uploadImageChange(images) {
				console.warn("图片列表：", images)
				this.formInfo.user_picurl = images[0]
			},
			sexChange(e){
				this.sexIndex = e.detail.value;
			},
			onSubmit(){
				for (let item in this.notNull) {
					if (!this.formInfo[item]) {
						this.$util.toast(this.notNull[item]);
						return;
					}
				}
				// if(!this.$util.isIdcard(this.formInfo.staff_id)){
				// 	this.$util.toast('请输入正确的身份证号码！');
				// 	return
				// }
				let path = this.formInfo.pi_customer_staff_id ? 'mySelf/updateCustomerStaff' : 'mySelf/addCustomerStaff'
				this.$util.confirm({
					content: '确认要提交员工信息？',
					confirmText: '提交',
				}).then((isConfirm)=>{
					if (isConfirm) {
						this.$util.post({
							url:  path,
							data: {
								...this.formInfo
							}
						}).then(res => {
							uni.redirectTo({
								url: '/pages/employee/employee-result'
							})
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.required{
	color: #2C72FF;
}
.list {
	margin: 20rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;

	.content-title{
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		display: flex;
		align-items: center;
		padding: 32rpx 0rpx;
		.title-icon{
			width: 12rpx;
			height: 40rpx;
			background-color: #2C72FF;
			border-top-right-radius: 8rpx;
			border-bottom-right-radius: 8rpx;
			margin-right: 10rpx;
		}
	}
	.list-item {
		display: flex;
		flex-direction: row;
		align-items: center;

		color: #333;
		font-size: 28rpx;
		padding: 35rpx 20rpx;

		.title1 {
			color: #333;
			margin-left: 20rpx;
		}

		.right-title1{
			flex: 1;
			text-align: right;
			color: #333;
		}
		.right-title1-empty {
			color: #ccc;
		}
		.jiantou {
			width: 14rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}

		.add-img {
			width: 120rpx;
			height: 120rpx;
			margin-right: 20rpx;
		}
		.del-img {
			width: 30rpx;
			height: 30rpx;
			// margin-right: -20rpx;
		}
	}

	.desc-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		:last-child {
			margin-top: 20rpx;
			padding: 5rpx;
			width: 100%;
			height: 120rpx;
			background-color: #F9F9F9;

			>textarea {
				margin: 0rpx;
			}
		}
	}
	.upload-img-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		.add-img-view {
			display: flex;
			align-items: center;
			flex-direction: row;
			background-color: #FFFFFF !important;
			color: #999;
			font-size: 24rpx;
			margin-top: 20rpx;

			.add-img-view-item {
				margin-right: 5rpx;
				:first-child {
					width: 120rpx;
					height: 120rpx;
				}
			}
		}
	}
	.item-border {
		border-bottom: 1rpx #F8F8F8 solid;
	}
}
</style>
